<template>
  <section class="ProductListCard" :id="data.id">
    <router-link :to="'/Details' + data.aHerf" tag="a">
      <!-- <img :src="data.imgSrc" alt /> -->
      <div class="imgInit">
        <div>
          <img :src="img" alt class="imgLid" />
          <img :src="data.imgSrc" alt class="imgMain" />
        </div>
      </div>
      <span>{{ data.PnameN }}</span>
    </router-link>
    <p class="describe">
      <span class="price" v-html="data.price"></span>
      <del class="delPrice" v-html="data.delPrice"></del>
    </p>
    <p class="saleInfo">
      <span v-if="data.onSale" class="onSale">{{ data.onSale }}</span>
    </p>
  </section>
</template>

<script>
export default {
  name: "ProductListCard",
  props: ["data"],
  data() {
    return {
      img: require("@/assets/images/zhanwei.png")
    };
  }
};
</script>

<style scoped>
.ProductListCard a {
  padding: 0.02rem;
  display: block;
  line-height: 1.2em;
  font-size: 0.9em;
  position: relative;
  text-align: center;
  color: #666;
}

.imgInit {
  display: inline-block;
  margin-bottom: 0.04rem;
  width: 94%;
  padding: 0.06rem;
  vertical-align: top;
}

.imgInit div {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
}

.imgMain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.imgInit img.imgLid {
  width: 100%;
}

.ProductListCard a span {
  display: block;
  text-align: left;
  padding: 0 0.1rem;
  height: 0.64rem;
  line-height: 0.32rem;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 0.68rem;
  font-size: 0.24rem;
}

.describe {
  margin-top: 0.2rem;
  height: auto;
  line-height: 1.2em;
  margin: 0.2rem 0 0 0.1rem;
}

.price {
  width: auto;
  position: relative;
  font-weight: 500;
  font-size: 0.28rem;
  font-family: PingFangSC-Medium;
  color: rgba(253, 71, 101, 1);
}

.delPrice {
  width: 1.36rem;
  height: 0.4rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 0.2rem;
  padding-left: 0.1rem;
}

.saleInfo {
  margin: 0.2rem 0.1rem;
  height: auto;
  line-height: 1.2em;
}

.onSale {
  padding: 0 0.06rem;
  margin-right: 0.1rem;
  border: 0.02rem solid #fd4765;
  border-radius: 0.5rem;
  color: #fd4765;
  width: auto;
  line-height: 1.2;
  position: relative;
}
</style>